<template>
  <div class="right-toolbar" :style="style">
    <q-btn-group flat>
      <!-- 搜索按钮 -->
      <q-btn
        v-if="showSearch"
        round
        dense
        flat
        :icon="search ? 'search_off' : 'search'"
        @click="toggleSearch"
      >
        <q-tooltip>
          {{ search ? '隐藏搜索' : '显示搜索' }}
        </q-tooltip>
      </q-btn>

      <!-- 刷新按钮 -->
      <q-btn round dense flat icon="refresh" @click="refresh">
        <q-tooltip>刷新</q-tooltip>
      </q-btn>

      <!-- 显隐列按钮 -->
      <q-btn
        round
        dense
        flat
        icon="view_column"
        @click="showColumnDialog"
        :disable="!hasVisibleColumns"
      >
        <q-tooltip>显隐列</q-tooltip>
      </q-btn>
    </q-btn-group>

    <!-- 显隐列对话框 -->
    <ColumnVisibilityDialog
      v-model="open"
      :columns="columns"
      @update:columns="emit('update:columns', $event)"
    />
  </div>
</template>

<script setup>
import ColumnVisibilityDialog from './components/ColumnVisibilityDialog.vue'

const props = defineProps({
  search: {
    type: Boolean,
    default: true,
  },
  showSearch: {
    type: Boolean,
    default: true,
  },
  columns: {
    type: Array,
    default: () => [],
  },
  gutter: {
    type: Number,
    default: 10,
  },
})

const emit = defineEmits(['update:search', 'refresh'])

const open = ref(false)

const style = computed(() => {
  return props.gutter ? { marginRight: `${props.gutter}px` } : {}
})

// 检查是否有可显示/隐藏的列
const hasVisibleColumns = computed(() => {
  return props.columns.some((col) => 'visible' in col)
})

function toggleSearch() {
  emit('update:search', !props.search)
}

function refresh() {
  emit('refresh')
}

function showColumnDialog() {
  open.value = true
}
</script>

<style lang="scss" scoped>
.right-toolbar {
  display: flex;
  align-items: center;
  margin-left: auto;
}
</style>
